Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rich Text: Determine emptiness by value #5091

Merged
merged 3 commits into from
May 2, 2018

Conversation

aduth
Copy link
Member

@aduth aduth commented Feb 16, 2018

Note: This pull request has try/undo-buffer (#4956) assigned as a base for easier future merging.

This pull request seeks to remove assignment of a this.isEmpty instance property in the RichText component, and in doing so, avoids calculating emptiness on change.

Open questions:

It's unclear when we'd ever expect this.isEmpty to have been assigned as true in onChange where getContent would otherwise not return an empty array. If this is still possible, I'd be inclined to consolidate filtering recently applied for block splitting via filterEmptyNodes (#5034).

Testing instructions:

Repeat testing instructions from #5034

Verify that the RichText placeholder is shown when expected: when the block is not selected and is empty.

@aduth aduth added [Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable [Type] Performance Related to performance efforts labels Feb 16, 2018
@@ -397,8 +395,7 @@ export class RichText extends Component {
*/

onChange() {
this.isEmpty = this.editor.dom.isEmpty( this.editor.getBody() );
this.savedContent = this.isEmpty ? [] : this.getContent();
this.savedContent = this.getContent();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe this change is creating some issues, you can't reproduce with consistency but some times when you split a paragraph and then empty one of these two paragraphs you'll end up with an empty paragraph but not really considered empty since the inserter doesn't show up.

We might want the filtering behavior like you said.

@ellatrix
Copy link
Member

ellatrix commented Feb 16, 2018

Could we maybe still leave the TinyMCE empty check in place, but still look at the value when rendering instead of creating a new property? Should have done that in the undo PR because the property makes little sense.

I think will still have to either check for emptiness or filter out empty nodes, in which case the question becomes which one is more performant?

@aduth
Copy link
Member Author

aduth commented Feb 16, 2018

Could we maybe still leave the TinyMCE empty check in place, but still look at the value when rendering instead of creating a new property?

I think we'll want both changes eventually, but agree it could have been done in separate steps.

I think will still have to either check for emptiness or filter out empty nodes, in which case the question becomes which one is more performant?

Well, we should want to be consistent in either case.

Looking at the implementation of isEmpty, it does a fair bit more, but also things we should probably want. I'll want to compare/contrast with the isEmptyInlineBoundary and isEmptyNode helpers in RichText, as they may be targeting different things.

@ellatrix
Copy link
Member

@aduth What's left to do here? Do we still want this? Or do we want if done differently?

@aduth
Copy link
Member Author

aduth commented May 1, 2018

@iseulde I think we do want this, as this.isEmpty is an unnecessary cached derived value which can / should be calculated within render where it's used. That said, the previous consideration of filtering empty nodes to ensure that value is empty when the content is empty could be considered a prerequisite. We'll also need to update this with consideration of the string format prop.

@aduth aduth force-pushed the update/remove-rich-text-isempty branch from 059d8ba to f9f2739 Compare May 1, 2018 19:45
@aduth aduth changed the base branch from try/undo-buffer to master May 1, 2018 19:45
@aduth
Copy link
Member Author

aduth commented May 1, 2018

Rebased to resolve conflicts, and changed base to master since #4956 has been merged.

In f9f2739, I applied child node filtering during a split to both the before and after fragments. This should address an issue where pressing Enter from the beginning of a block with text would leave the first with a value of [ '' ] (and thus, not considered empty).

I've played around a bit and am not able to find any other cases where this could occur.

Copy link
Contributor

@youknowriad youknowriad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also played around this and it seems to work as intended. I believe we can probably add an e2e test to check that the side inserter is still showing using different ways to create empty paragraphs.

@aduth aduth force-pushed the update/remove-rich-text-isempty branch from f9f2739 to 26be694 Compare May 2, 2018 13:50
@aduth
Copy link
Member Author

aduth commented May 2, 2018

I went further in 26be694 after noticing we have many different touch points considering emptiness in different ways. With #4955 keeping the value should in sync, when the editor is empty the value should never be anything other than an empty array. If it is, that's a bug, and should be addressed directly. With getContent using TinyMCE's isEmpty to return an empty array though, I expect this should be mostly fine as-is. It's the splitting functions that were shown to be problematic here.

I also suspect many of the functions changed may be simply remnants of the pre-#4955 state of the component where we couldn't rely on an up-to-date value.

@ellatrix
Copy link
Member

ellatrix commented May 2, 2018

If it is, that's a bug, and should be addressed directly.

That sounds good. I'm fine with trying this.

@aduth
Copy link
Member Author

aduth commented May 2, 2018

Thanks @iseulde and @youknowriad !

@aduth aduth merged commit 5b2e500 into master May 2, 2018
@aduth aduth deleted the update/remove-rich-text-isempty branch May 2, 2018 14:20
@mtias mtias added this to the 2.8 milestone May 3, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable [Type] Performance Related to performance efforts
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants